
<template lang="pug">
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(span="6")
          span.label-txt.w80 客户名称：
          Input(v-model="formData.customerName" placeholder="请输入" clearable)
        Col.pr-20.mb-15(span="6")
          span.label-txt.w80 签约销售：
          .choose-saler
            Tooltip(placement="bottom" max-width="200" :disabled="!tipIsShow" theme="light")
              Input.input(v-model="dolderNames" type="text" readonly clearable @on-clear="salersClear")
              div(slot="content")
                .font-14 {{dolderNames}}
            .button(@click="chooseSaler") 选择
          //- Input(v-model="formData.saler" placeholder="请输入" clearable)
        Col.pr-20.mb-15(span="6")
          span.label-txt.w110 项目经理/助理：
          Input(v-model="formData.serverName" placeholder="请输入" clearable)
        Col.pr-20.mb-15(span="6")
          Button(type="info" @click="searchFn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" stripe :columns="setThead" :loading="loading" :data="tableData" @on-selection-change="handleOnSelectChange")
        div(slot="header")
          .pull-left.table-title-btns
            span.leftText
              | 待交付项目数:
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
          .pull-right.table-title-btns
            //- Button(type="info" @click="selectServer") 分配项目经理/助理
        template(slot-scope="{ row, index }" slot="customerName")
          .u-d-info(@click="gotoDetail(row.customerID)") {{row.customerName}}
        template(slot-scope="{ row, index }" slot="action")
          Button(type="text" size="small" @click="handleShowAddInfoModal(row)") 添加完成信息
          //- Button(type="text" size="small" @click="handleShowAddFeedbackModal(row)") 添加课程反馈
          //- Button.ml-10(type="text" size="small" @click="handleAddReport(row.productDeliveryID)") 课后报告
        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :current="tableComone.pageIndex"
            :total="tableComone.totalRows"
            @on-change="onChangePage"
            @on-page-size-change="onpageSizeChange"
            show-sizer
            show-total
            placement="top"
            :page-size-opts="[10, 20, 30, 50, 100]"
          )
    //- 完成信息弹窗
    AddInfoModal(ref="AddInfoModal" @query="searchFn")
    //- 添加反馈弹窗
    AddFeedbackModal(ref="AddFeedbackModal" @query="searchFn")
    //- 添加课后报告弹窗
    AddReportModal(ref="addReport" :id="productDeliveryID" :reportArr="reportArr" @get-report-list="getReportList")
    visibvleTreeList(ref="treeModal" :treeData="treeData" @on-change="getSalerId")
</template>

<script>
import Mixin from '../deliverMixin.js'
import _cloneDeep from 'clone-deep'
import AddInfoModal from './modal/addInfoModal.vue'
import AddFeedbackModal from './modal/addFeedbackModal.vue'
import AddReportModal from './modal/addReport.vue'
import { ProductDeliveryApi } from '@/api/ProductDelivery.api.js'
import { incompleteThead } from '../tableHead.js'

export default {
  name: 'hrdc-incomplete',

  data () {
    return {
      loading: false,
      productDeliveryID: '', // 项目id
      reportArr: [], // 课后报告数组
      formData: {
        customerName: '',
        saler: '',
        serverName: ''
      },
      selectedId: [], // 勾选的id集合,array格式
      thead: _cloneDeep(incompleteThead),
      // thead: ['selection','a','b','c','d','a_1','a_2','a_3','b_1','b_2','b_3','b_4','c_1','d_2','l'],
      tableData: [],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10, // 当前页面展示条数
        inServiceCount: 0, // 在职
        outServiceCount: 0 // 离职
      }
    }
  },

  mixins: [Mixin],

  components: {
    AddInfoModal,
    AddFeedbackModal,
    AddReportModal
  },

  computed: {
    setThead () {
      return this.thead.splice(1, 17)
    }
  },
  watch: {
    $route (to, from) {
      if (to.name === 'hrdc-incomplete') {
        this.query()
      }
    }
  },

  mounted () {
    this.query()
    console.log('this.thead: ', this.thead)
    console.log('this.setThead: ', this.setThead)
  },

  methods: {
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedId = value.map((item) => {
        return item.id
      })
    },

    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      this.loading = true
      var params = {
        CustomerName: this.formData.customerName,
        Saler: this.formData.saler,
        HolderIds: this.salesIds,
        ServerName: this.formData.serverName,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize,
        OrderBy: '',
        Asc: true
      }
      let res = await ProductDeliveryApi.getListToDelivery(params)
      this.loading = false
      if (res.data.code === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows // 总条数
      } else {
        this.tableData = []
      }
    },

    // 显示弹窗-添加交互完成信息
    handleShowAddInfoModal (row) {
      if (row.serverID) {
        this.$refs.AddInfoModal.show()
        this.$refs.AddInfoModal.formData.productDeliveryID = row.id
        this.$refs.AddInfoModal.formData.contractPayment = row.contractPayment
        this.$refs.AddInfoModal.formData.serverName = row.serverName
        this.$refs.AddInfoModal.formData.payment = row.payment
      } else {
        this.$Message.warning('请先给该项目分配项目经理/助理')
      }
    },
    // 显示弹窗-添加反馈
    handleShowAddFeedbackModal (row) {
      console.log('row: ', row)
      this.$refs.AddFeedbackModal.show()
      // this.$refs.AddFeedbackModal.productDeliveryID = row.productDeliveryID
    },
    // 添加课后报告弹窗
    handleAddReport (id) {
      console.log(id)
      this.$refs.addReport.show()
      this.productDeliveryID = id
      this.getReportList()
    },
    // 获取课后报告文件列表
    getReportList () {
      ProductDeliveryApi.addReport({
        AssociationId: this.productDeliveryID,
        CategoryName: '课后反馈'
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.reportArr = res.data.data
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .pos-r{
    position: relative;
  }
</style>
